import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  build: {
    /**
     * - 描述：指定编译目标的浏览器兼容性。
     * - 值：可以是 'esnext'、'modules'、'browser' 等。
     * - 默认值：'esnext'。
     * 1. 'esnext':
        - 含义：将代码编译为ES6+语法，不进行任何转换。
        - 适用场景：适用于现代浏览器，对ES6+语法支持良好的环境。

        2. 'modules':
        - 含义：将代码编译为ES模块化规范。
        - 适用场景：适用于支持ES模块化规范的环境，例如现代浏览器或支持ES模块的Node.js版本。

        3. 'browser':
        - 含义：将代码编译为浏览器可执行的代码，包括转换ES6+语法和处理其他浏览器不支持的特性。
        - 适用场景：适用于需要兼容各种浏览器的环境，会进行更多的代码转换和降级处理。
     */
    target: 'modules',
    /**
     * - 描述：指定输出目录，即打包后的组件库存放的位置。
     * - 值：字符串类型，表示目录路径。
     * - 默认值：'dist'。
     */
    outDir: 'dist',
    lib: {
      /**
       * - 描述：指定组件库的入口文件。
       * - 值：字符串类型，表示入口文件路径。
       * - 默认值：'src/main.js'。
       */
      entry: 'index.ts',
      /**
       * - 描述：指定组件库的全局变量名。
       * - 值：字符串类型，表示全局变量名。
       * - 默认值：'YourLibraryName'。
       */
      name: 'gykStore',
      /**
       * - 描述：指定打包后的文件名。
       * - 值：一个函数，接收一个参数format，用于指定输出格式。
       * - 默认值：(format) => `your-library-name.${format}.js`。
       * @param format 
       * @returns 
       */
      fileName: "gyk-store",
    },
    rollupOptions: {
      // 配置外部依赖，例如Vue或React等
      /**
       * - 描述：配置外部依赖，告诉rollup哪些模块是外部的，不需要打包进组件库。
       * - 值：一个数组，包含需要排除的依赖模块名称。
       * - 默认值：['vue']。
       */
      external: ['vue'],
      output: {
        /**
         * - 描述：配置组件库的输出格式。
         * - 值：可以是 'default'、'named'、'none' 等。
         * - 默认值：'named'。
         * 1. 'default':
            - 含义：将组件库的默认导出作为输出。
            - 适用场景：适用于组件库只有一个默认导出的情况，例如使用export default导出的组件。

            2. 'named':
            - 含义：将命名导出作为输出。
            - 适用场景：适用于组件库有多个命名导出的情况，例如使用export导出的多个组件或函数。

            3. 'none':
            - 含义：不导出任何内容。
            - 适用场景：适用于组件库只作为外部依赖使用，不需要导出任何内容的情况。
         */
        // 配置组件库的输出格式为ES module和UMD
        exports: 'named',
        globals: {
          /**
           * - 描述：配置全局变量的映射关系，用于将外部依赖模块与全局变量建立关联。
           * - 值：一个对象，键是外部依赖模块名称，值是对应的全局变量名。
           * - 默认值：{ vue: 'Vue' }。
           */
          vue: 'Vue',
        },
      },
    },

  },
  // resolve，定义别名
  resolve: {
    alias: {
      '@': path.resolve('./src')
    }
  },
})